<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
				body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
					margin:0;
					padding:0;
				}
				.nice-select input {
					outline:none;
					cursor:pointer;
					width:14em;
					height:1.8em;
					font-size:1em;
					border:1px solid #000;
					background:url(image/icon.png) no-repeat scroll right center transparent;
					background-position:96% 50%;
					padding:0 10px;
					-webkit-border-radius:.3em;
					-moz-border-radius:.3em;
					border-radius:.3em;
					position:absolute;
					line-height:1.8em;
				}
				ul {
					list-style:none;
				}
				.nice-select {
					position:relative;
					width:14em;
					top:10em;
					left:10em;
					box-shadow:0 3px 5px #999;
					-webkit-border-radius:.3em;
					-moz-border-radius:.3em;
					border-radius:.3em;
				}
				.nice-select ul {
					/*display:none;
					*/
							border:1px solid #d5d5d5;
					width:13.9em;
					position:absolute;
					top:1.8em;
					overflow:hidden;
					background-color:#fff;
					max-height:150px;
					overflow-y:auto;
					border-top:0;
					z-index:10001;
				}
				.nice-select ul li {
					height:30px;
					line-height:2em;
					overflow:hidden;
					padding:0 10px;
					cursor:pointer;
					border-top:1px solid #d5d5d5;
				}
				.nice-select ul li.on {
					background-color:#e0e0e0;
				}

			</style>
	</head>
	<body>
		<div class="nice-select">
		    <input id="customerId" type="text" oninput="searchList(this.value)">
		    <ul>
		        <li>Java--我的--最爱</li>
		        <li>PHP--很棒的wo</li>
		        <li>HTML--简单</li>
		        <li>jQuery--有点难</li>
		        <li>Android--安卓</li>
		        <li>C--不会</li>
		        <li>C++--更不会</li>
		        <li>Struts--懂哦</li>
		        <li>hibernate--已经不怎么懂</li>
		        <li>spring--懂哦</li>
		        <li>0123456789--10</li>
		    </ul>
		</div>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<script>
			function searchList(strValue) {
		    var count = 0;
		    if (strValue != "") {
		        $(".nice-select ul li").each(function(i) {
		            var contentValue = $(this).text();
		            console.log(this)
		            if (contentValue.toLowerCase().indexOf(strValue.toLowerCase()) < 0) {
		                $(this).hide();
		                count++;
		            } else {
		                $(this).show();
		            }
		            if (count == (i + 1)) {
		                $(".nice-select").find("ul").hide();
		            } else {
		                $(".nice-select").find("ul").show();
		            }
		        });
		    } else {
		        $(".nice-select ul li").each(function(i) {
		            $(this).show();
		            $(".nice-select").find("ul").show();
		        });
		    }
		}
		</script>
	</body>
</html>
